<template>
  <div>
    <el-form
      :label-width="80"
      :model="form"
      class="myform"
      status-icon
      :rules="rules"
      ref="myform"
    >
      <el-form-item label="用户名称" prop="username">
        <el-input
          type="text"
          placeholder="请输入"
          v-model="form.username"
          :prefix-icon="User"
        ></el-input>
      </el-form-item>
      <el-form-item label="登录密码" prop="password">
        <el-input
          type="password"
          placeholder="请输入"
          v-model="form.password"
          show-password
          :prefix-icon="Lock"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <p class="flex">
          <el-button type="primary" class="btn" @click="submitForm('myform')"
            >登录</el-button
          >
          <el-button type="danger" class="btn" @click="resetForm('myform')"
            >重置</el-button
          >
        </p>
      </el-form-item>
      <el-form-item class="lastitem">
        <div class="links">
          <router-link class="litem" :to="{ name: 'register' }">
            没有账号,立即注册
          </router-link>
          <router-link class="litem color" :to="{ name: 'forgetpass' }">
            忘记密码
          </router-link>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import {
  toRefs,
  reactive,
  ref,
  onMounted,
  onBeforeUpdate,
  getCurrentInstance,
} from "vue";
import { Calendar, Search, User, Lock } from "@element-plus/icons";
import { reg } from "@/utils/validate";
import { ajax } from "@/api";
import { useRouter } from "vue-router";

export default {
  setup(props, context) {
    const { proxy } = getCurrentInstance();
    const myform = ref();
    const router = useRouter();
    const state = reactive({
      form: {},
      Calendar,
      Search,
      Lock,
      User,
      reg,
      rules: {
        username: [
          {
            required: true,
            message: "请输入用户名",
            trigger: "blur",
          },
        ],
        password: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur",
          },
          {
            pattern: reg.pwd,
            trigger: "blur",
            message: "请输入6-16的数字字母组合",
          },
        ],
      },
    });
    const submitForm = () => {
      myform.value.validate(async (valib) => {
        if (valib) {
          // 正则通过
          // ajax login
          const { code, result, token } = await ajax.loginusername(state.form);
          if (code == 200) {
            router.push({ name: "main" });
            localStorage.setItem("username", result.username);
            sessionStorage.setItem("token", token);
          }
        } else {
          ElMessage.error("登录信息有误，请重新登录");
        }
      });
    };
    onMounted(() => {
      // bug
      if (proxy.$root.$route.query.username) {
        state.form.username = proxy.$root.$route.query.username;
      } else {
        state.form.username = localStorage.getItem("username");
      }
    });
    const resetForm = () => {
      //   state.form = {};
      myform.value.resetFields();
    };
    return {
      ...toRefs(state),
      myform,
      submitForm,
      resetForm,
    };
  },
};
</script>